<script lang="jsx" setup>
import { nextTick, ref, watch } from 'vue';
import { Empty } from 'ant-design-vue';
import { getEngineeringDataInquiry } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';

const props = defineProps({
  moduleData: {
    type: Object,
    required: true
  }
});

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const imgSrc = ref(null);

const isLocalHost = window.location.hostname === 'localhost';

function getData() {
  getEngineeringDataInquiry({
    prodNo: props.moduleData.moduleNo,
    techId: '1350000053540000'
  }).then(({ data, error }) => {
    if (!error) {
      if (data.image) {
        imgSrc.value = `${isLocalHost ? 'http://192.168.166.166/dev-api/' : '/dev-api/'}${data.image}`;
      } else {
        imgSrc.value = null;
      }
    }
  });
}

watch(
  () => props.moduleData,
  () => {
    nextTick(() => {
      getData();
    });
  },
  {
    deep: true
  }
);
</script>

<template>
  <div class="h-full w-full">
    <template v-if="imgSrc">
      <AImage :src="imgSrc" />
    </template>
    <template v-else>
      <div class="h-full w-full flex-center">
        <AEmpty :image="simpleImage" description="暂无工程图纸" />
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped></style>
